<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右结构页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f6f8;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #ffffff; /* 白色背景 */
            color: #333; /* 深灰色文字 */
            padding: 20px;
            border-right: 1px solid #ddd; /* 右侧边框 */
        }
        .sidebar h2 {
            margin: 0 0 20px;
            font-size: 1.2em;
            text-align: center;
            color: #555; /* 深灰色标题 */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin-bottom: 10px;
        }
        .sidebar ul li a {
            color: #333; /* 深灰色链接文字 */
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .sidebar ul li a:hover {
            background-color: #f2f2f2; /* 悬停时的浅灰色 */
            color: #222; /* 悬停时的深灰色文字 */
        }
        .sidebar ul li a i {
            margin-right: 10px;
            font-size: 1.2em;
            color: #666; /* 图标的颜色 */
        }
        .sidebar ul li a.active {
            background-color: #ffecb3; /* 选中状态的浅黄色 */
            color: #333; /* 选中状态的深灰色文字 */
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #ffffff; /* 白色背景 */
            box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); /* 左侧阴影 */
        }
        .content h2 {
            margin-top: 0;
            color: #333; /* 深灰色标题 */
        }
        .table thead {
            background-color: #ffecb3; /* 表头的浅黄色 */
        }
        .table th, .table td {
            border-color: #ffecb3; /* 表格边框的浅灰色 */
        }
        /* 彩色系导航栏 */
        .sidebar ul li:nth-child(1) a {
            color: #ff6347; /* 红色 */
        }
        .sidebar ul li:nth-child(2) a {
            color: #4682b4; /* 蓝色 */
        }
        .sidebar ul li:nth-child(3) a {
            color: #32cd32; /* 绿色 */
        }
        .sidebar ul li a:hover {
            color: #333; /* 悬停时的深灰色文字 */
        }
        .sidebar ul li a.active {
            color: #333; /* 选中状态的深灰色文字 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar" th:include="left.html">
        <h2>导航栏</h2>
        <ul>
            <li><a href="#" class="active"><i class="fas fa-user"></i> 学生</a></li>
            <li><a href="#"><i class="fas fa-chalkboard-teacher"></i> 教师</a></li>
            <li><a href="#"><i class="fas fa-book"></i> 课程</a></li>
        </ul>
    </div>
    <div class="content">
        <form action="/Teacher/add" class="was-validated" method="post">
            <div class="form-group">
                <label for="name">Username:</label>
                <input type="text" class="form-control" id="name" placeholder="Enter username" name="name" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入用户名！</div>
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入密码！</div>
            </div>
            <div class="form-group">
                <label for="course_id">课程:</label>
                <input type="text" class="form-control" id="course_id" placeholder="Enter course_id" name="course_id" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入课程！</div>
            </div>
<!--            <div class="form-group">-->
<!--                <label for="sex1">性别:</label>-->
<!--                <div class="d-flex">-->
<!--                    <div class="form-check mr-3">-->
<!--                        <input class="form-check-input" type="radio" name="sex" id="sex1" value="男" required>-->
<!--                        <label class="form-check-label" for="sex1">男</label>-->
<!--                    </div>-->
<!--                    <div class="form-check">-->
<!--                        <input class="form-check-input" type="radio" name="sex" id="sex2" value="女" required>-->
<!--                        <label class="form-check-label" for="sex2">女</label>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="invalid-feedback">请选择性别！</div>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="birthday">出生日期：</label>-->
<!--                <input type="date" class="form-control" id="birthday" placeholder="Enter birthday" name="birthday" required>-->
<!--                <div class="valid-feedback">验证成功！</div>-->
<!--            </div>-->
            <div class="form-group">
                <label for="sex">性别:</label>
                <input type="text" class="form-control" id="sex" placeholder="Enter sex" name="sex" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入性别！</div>
            </div>
            <div class="form-group">
                <label for="birthday">出生日期:</label>
                <input type="text" class="form-control" id="birthday" placeholder="Enter birthday" name="birthday" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入出生日期！</div>
            </div>
            <div class="form-group">
                <label for="professional">职业:</label>
                <input type="text" class="form-control" id="professional" placeholder="Enter professional" name="professional" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入职业！</div>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
                    <div class="valid-feedback">验证成功！</div>
                    <div class="invalid-feedback">同意协议才能提交。</div>
                </label>
            </div>
            <button type="submit" class="btn btn-primary">新增教师</button>
        </form>
    </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>